<template>
    <view class="content">
        <view class="first">
            <view class="first-left">
                <image src="https://gwk.oss-cn-beijing.aliyuncs.com/first-left.png" mode="aspectFit"></image>
            </view>
            <view class="first-middle">
                <text class="title">故渊阁</text>
            </view>
            <view class="first-right">
                <image src="https://gwk.oss-cn-beijing.aliyuncs.com/first-right.png" mode="aspectFit"></image>
            </view>
        </view>

        <view class="second">
            <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" class="swiper">
                <swiper-item v-for="poster in posters" :key="poster.id">
                    <image :src="poster.url" class="poster-image" mode="aspectFill" @error="imageError"
                        @load="imageLoad(poster.url)"></image>
                </swiper-item>
            </swiper>
        </view>

        <view class="categories">
            <view class="category-row">
                <view v-for="(category, index) in categories" :key="index" class="category-button"
                    @click="selectCategory(category)">
                    {{ category }}
                </view>
            </view>
        </view>

        <view class="products">
            <view v-for="product in filteredProducts" :key="product.id" class="product-card"
                @click="navigateToDetail(product)">
                <image :src="product.url" class="product-image" mode="aspectFill" @error="imageError($event, product)"
                    @load="imageLoad(product.url)"></image>
                <text class="product-name">{{ product.商品名 }}</text>
                <text class="product-price">¥{{ product.价格 }}</text>
            </view>
        </view>

        <!-- 遮罩层 -->
        <view :class="['mask', { hidden: !showMask }]" v-show="showMask">
            <view class="mask-content">
                <text class="mask-title">天璇智境</text>
                <br />
                <text class="mask-text">申请获取你的微信头像与昵称信息</text>
                <button open-type="chooseAvatar" bindchooseavatar="getAvatar" class="but"></button>
                <input type="nickname" class="mask-input" placeholder="请输入昵称" name="nickName" @change="getNickname" />
                <view class="mask-buttons">
                    <button @click="hideMask" class="btn-cancel">取消</button>
                    <button @click="confirmMask" class="btn-confirm">确认</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            posters: [],
            employees: [],
            categories: ['全部', '手机', '电脑', '食品', '男装', '生鲜', '家具厨具'],
            selectedCategory: '全部',
            defaultImage: '../../static/default.png', // 默认图片路径
            showMask: false, // 控制遮罩层显示
            nickName: '', // 存储用户输入的昵称
            avatarUrl: '' // 存储用户头像链接
        };
    },
	  onShareAppMessage() {
	    return {
	      title: '分享给朋友的标题',
	      path: '/pages/index/index', // 分享路径，确保路径正确
	      imageUrl: 'https://gwk.oss-cn-beijing.aliyuncs.com/logo.png' // 分享的图片 URL
	    };
	  },
	  onShareTimeline() {
	    return {
	      title: '分享到朋友圈的标题',
	      query: 'path=/pages/index/index', // 分享路径中的参数
	      imageUrl: 'https://gwk.oss-cn-beijing.aliyuncs.com/logo.png' // 分享的图片 URL
	    };
	  },
    mounted() {
        this.fetchEmployees();
        this.fetchPosters();
    },
    onShow() {
        this.checkAuthorization();
    },
    computed: {
        filteredProducts() {
            if (this.selectedCategory === '全部') {
                return this.employees;
            }
            return this.employees.filter(product => product.类型 === this.selectedCategory);
        }
    },
    methods: {
        fetchEmployees() {
            uni.request({
                url: 'http://123.57.75.79:3000/employees',
                method: 'GET',
                success: (response) => {
                    console.log('Employees data:', response.data);
                    this.employees = response.data;
                },
                fail: (error) => {
                    console.error('获取数据失败:', error);
                }
            });
        },
        fetchPosters() {
            uni.request({
                url: 'http://123.57.75.79:3000/customers',
                method: 'GET',
                success: (response) => {
                    console.log('Posters data:', response.data);
                    this.posters = response.data;
                },
                fail: (error) => {
                    console.error('获取海报数据失败:', error);
                }
            });
        },
        selectCategory(category) {
            this.selectedCategory = category;
        },
        navigateToDetail(product) {
            wx.navigateTo({
                url: `/pages/productdetail/productdetail?id=${product.id}&name=${encodeURIComponent(product.商品名)}&description=${encodeURIComponent(product.商品详情)}&price=${product.价格}&url=${encodeURIComponent(product.url)}`
            });
        },
        imageError(event, product) {
            console.error('图片加载失败:', event);
            product.url = this.defaultImage; // 将图片 URL 设置为默认图片
        },
        imageLoad(url) {
            console.log('图片加载成功:', url);
        },
        // 隐藏遮罩层
        hideMask() {
            this.showMask = false;
        },
        // 确认并隐藏遮罩层
        confirmMask() {
            this.showMask = false;
            this.saveUserInfo();
        },
        // 获取用户头像
        getAvatar(event) {
            console.log('Avatar URL:', event.detail.avatarUrl); // 打印头像链接
            this.avatarUrl = event.detail.avatarUrl; // 保存头像链接
        },
        getNickname(e) {
            this.nickName = e.target.value;
            console.log('获取的昵称:', this.nickName);
        
            // 将昵称存储到本地
            try {
                wx.setStorageSync('nickName', this.nickName);
                console.log('昵称已保存到本地存储');
            } catch (e) {
                console.error('存储昵称失败:', e);
            }
        },
        // 检查授权
        checkAuthorization() {
            const nickName = wx.getStorageSync('nickName');
            console.log('Fetched nickName:', nickName); // 检查获取到的昵称信息
            if (nickName) {
                this.nickName = nickName; // 将昵称添加到变量
                this.showMask = false;
            } else {
                // 显示遮罩层
                this.showMask = true;
            }
        },
        // 保存用户信息
        saveUserInfo() {
            const userInfo = {
                nickName: this.nickName,
                avatarUrl: this.avatarUrl
            };
            try {
                wx.setStorageSync('userInfo', userInfo);
                console.log('用户信息已保存到本地存储');
            } catch (e) {
                console.error('存储用户信息失败:', e);
            }
        }
    },
    watch: {
        selectedCategory() {
            // 强制更新视图
            this.$forceUpdate();
        }
    }
};
</script>





<style scoped>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: #f2f4f5;
    }

    .first {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        background-color: #f14048;
        padding: 10px;
    }

    .first-left {
        flex: 1;
        display: flex;
        justify-content: flex-start;
    }

    .first-left image {
        width: 25px;
        height: 25px;
    }

    .first-middle {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .first-middle .title {
        font-size: 18px;
        color: white;
    }

    .first-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .first-right image {
        width: 25px;
        height: 25px;
    }

    .second {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .swiper {
        width: 90%;
        height: 150px;
        border-radius: 15px;
        overflow: hidden;
    }

    .poster-image {
        width: 100%;
        height: 100%;
        border-radius: 15px;
    }

    .categories {
        width: 100%;
        margin: 10px 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .category-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 85%;
    }

    .category-button {
        flex: 0 0 24%;
        padding: 10px 0;
        margin: 5px 0;
        background-color: #f14048;
        color: white;
        border: none;
        border-radius: 15px;
        text-align: center;
    }

    .products {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 100%;
        background-color: #ffffff;
    }

    .product-card {
        width: 35%;
        margin: 5px 2.5%;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 5px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;

        overflow: hidden;
        /* 确保溢出内容被隐藏 */
    }

    .product-image {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

    .product-name {
        margin: 5px 0;
        font-size: 14px;
        color: #333;
    }

    .product-price {
        font-size: 16px;
        color: #f14048;
        overflow: hidden;
        /* 隐藏溢出内容 */
        text-overflow: ellipsis;
        /* 对溢出的文本添加省略号 (...) */
        white-space: nowrap;
        /* 防止文本换行 */
        max-width: 100%;
        /* 确保最大宽度不超过父容器的100% */
        display: block;
        /* 确保元素表现为块级元素 */
        box-sizing: border-box;
        /* 包含padding和border在内 */
    }

    /* 授权弹出层样式 */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .modal-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
    }

    .modal-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .modal-text {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }
	
	.mask.hidden {
	    display: none;
	}

    .mask-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        width: 80%;
        max-width: 300px;
    }

    .mask-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .mask-text {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .mask-input {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .mask-buttons {
        display: flex;
        justify-content: space-between;
    }

    .mask-buttons button {
        width: 45%;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        color: white;
        border: none;
    }

    .mask-buttons .btn-cancel {
        background-color: #f14048;
    }

    .mask-buttons .btn-confirm {
        background-color: #4CAF50;
    }
</style>
